<template>
  <view class="container">
    <view class="header">
      <text class="title">海报生成测试</text>
    </view>
    
    <view class="content">
      <!-- 测试数据展示 -->
      <view class="test-data">
        <text class="section-title">测试数据:</text>
        <text class="data-item">类型: {{ testType }}</text>
        <text class="data-item">标题: {{ testData.warehouseName || testData.parkName }}</text>
        <text class="data-item">地址: {{ testData.address || testData.location }}</text>
        <text class="data-item">价格: ¥{{ testData.rentalPrice }}元/m²/天</text>
      </view>
      
      <!-- 操作按钮 -->
      <view class="actions">
        <button class="btn primary" @tap="showWarehousePoster">测试仓库海报</button>
        <button class="btn secondary" @tap="showParkPoster">测试园区海报</button>
        <button class="btn debug" @tap="showDebugPanel">调试字段映射</button>
      </view>
    </view>
    
    <!-- 海报弹窗 -->
    <PosterModal 
      :visible="showPosterModal"
      :type="testType"
      :data="testData"
      @close="showPosterModal = false"
      @book="handleBookFromPoster"
      @saved="handlePosterSaved"
    />
    
    <!-- 调试面板 -->
    <PosterDebug 
      :visible="showDebug"
      :type="testType"
      :data="testData"
    />
  </view>
</template>

<script>
import PosterModal from '@/components/PosterModal.vue'
import PosterDebug from '@/components/PosterDebug.vue'

export default {
  name: 'PosterTest',
  components: {
    PosterModal,
    PosterDebug
  },
  data() {
    return {
      showPosterModal: false,
      showDebug: false,
      testType: 'warehouse',
      testData: {
        // 仓库测试数据
        warehouseName: '测试仓库名称',
        address: '上海市浦东新区张江高科技园区',
        rentalPrice: '1.2',
        areaSize: 5000,
        warehouseType: {
          typeName: '高标仓'
        },
        floorHeight: '一层11.5m/二层7.5m',
        floorLoad: '5吨/m²',
        platformCount: 8,
        thumbnailUrl: '/static/assets/warehouse/warehouse-default.jpg'
      },
      parkData: {
        // 园区测试数据
        parkName: '测试园区名称',
        location: '上海市浦东新区张江高科技园区',
        rentalPrice: '0.9',
        rentableArea: 50000,
        totalArea: 200000,
        buildingArea: 150000,
        warehouseType: '高标仓',
        floorHeight: '一层11.5m/二层7.5m',
        thumbnailUrl: '/static/assets/park/park-default.jpg'
      }
    }
  },
  methods: {
    // 显示仓库海报
    showWarehousePoster() {
      this.testType = 'warehouse'
      this.testData = { ...this.testData }
      this.showPosterModal = true
    },
    
    // 显示园区海报
    showParkPoster() {
      this.testType = 'park'
      this.testData = { ...this.parkData }
      this.showPosterModal = true
    },
    
    // 显示调试面板
    showDebugPanel() {
      this.showDebug = true
    },
    
    // 从海报预约
    handleBookFromPoster() {
      uni.showToast({
        title: '预约功能测试',
        icon: 'success'
      })
    },
    
    // 海报保存成功
    handlePosterSaved() {
      uni.showToast({
        title: '海报已保存到相册',
        icon: 'success'
      })
    }
  }
}
</script>

<style scoped>
.container {
  padding: 20rpx;
  background: #f5f5f5;
  min-height: 100vh;
}

.header {
  text-align: center;
  margin-bottom: 40rpx;
}

.title {
  font-size: 36rpx;
  font-weight: bold;
  color: #333;
}

.content {
  background: white;
  border-radius: 20rpx;
  padding: 30rpx;
}

.test-data {
  margin-bottom: 40rpx;
}

.section-title {
  font-size: 28rpx;
  font-weight: bold;
  color: #333;
  display: block;
  margin-bottom: 20rpx;
}

.data-item {
  font-size: 24rpx;
  color: #666;
  display: block;
  margin-bottom: 10rpx;
  padding-left: 20rpx;
}

.actions {
  display: flex;
  flex-direction: column;
  gap: 20rpx;
}

.btn {
  padding: 20rpx;
  border-radius: 10rpx;
  font-size: 28rpx;
  border: none;
}

.btn.primary {
  background: #007aff;
  color: white;
}

.btn.secondary {
  background: #34c759;
  color: white;
}

.btn.debug {
  background: #ff9500;
  color: white;
}

.btn:active {
  opacity: 0.8;
}
</style>
